<template>
  <div class="admin-form">
    <el-form :model="admin" ref="adminForm" label-width="120px" label-position="right">
      <el-form-item label="姓名">
        <el-input v-model="admin.name" class="custom-input"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="admin.sex" placeholder="请选择" class="custom-select">
          <el-option label="男" :value="1"></el-option>
          <el-option label="女" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="密码">
        <el-input
            :type="showPassword ? 'text' : 'password'"
            class="custom-input"
            disabled
            :value="admin.password"
        ></el-input>
        <el-button type="text" icon="el-icon-view" @click="togglePasswordVisibility">
          {{ showPassword ? '隐藏密码' : '显示密码' }}
        </el-button>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="admin.phone" class="custom-input"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" :loading="loading" @click="sub" class="submit-button">提交修改</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Aid: JSON.parse(localStorage.getItem("AId")),
      admin: {
        name: '',
        sex: null,
        password: '',
        phone: ''
      },
      showPassword: false,
      loading: false
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    async load() {
      try {
        this.loading = true;
        let result = await this.$axios.get(`/adminId/${this.Aid}`);
        if (result.data.status === 200) {
          this.admin = result.data.data;
        } else {
          this.$message.error('加载数据失败');
        }
      } catch (error) {
        console.error('Error loading admin data:', error);
        this.$message.error('加载数据时发生错误');
      } finally {
        this.loading = false;
      }
    },
    async sub() {
      this.loading = true;
      try {
        let result = await this.$axios.post('/Aupd', this.admin);
        if (result.data.status === 200) {
          this.$message.success('修改成功');
          this.$router.push('/Ahome');
        } else {
          this.$message.error('修改失败');
        }
      } catch (error) {
        console.error('Error updating admin data:', error);
        this.$message.error('提交修改时发生错误');
      } finally {
        this.loading = false;
      }
    },
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    }
  }
};
</script>

<style scoped>
.admin-form {
  max-width: 500px;
  margin: 50px auto;
  padding: 30px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  color: #333;
}

.el-form-item {
  margin-bottom: 25px;
}

.custom-input, .custom-select .el-input__inner {
  border-radius: 6px;
  border: 1px solid #dcdfe6;
  background: #fff;
  color: #333;
  transition: all 0.3s;
}

.custom-input:focus, .custom-select .el-input__inner:focus {
  border-color: #409eff;
}

.submit-button {
  width: 100%;
  margin-top: 30px;
  font-size: 18px;
  font-weight: bold;
  background: linear-gradient(150deg, #409eff, #66b1ff);
  border: none;
  transition: all 0.3s;
}

.submit-button:hover {
  background: linear-gradient(150deg, #409eff, #66b1ff, #409eff);
}

.el-form-item__label {
  color: #333;
  font-weight: bold;
}
</style>